<template>
    <div v-loading="loading" :element-loading-delay="domainList.length > 0 ? 120 : 0" class="console-page domain">
        <el-row class="toolbar">
            <el-col :span="24" style="text-align:right">
                <el-button :icon="getIcon('refresh')" class="button-auto-resize" circle @click="getData" />
            </el-col>
        </el-row>
        <el-table :data="domainList" border header-cell-class-name="el-table-header-cell" @cell-click="cellClick"
            cell-class-name="el-table-cell" class="e-page table-without-pagination">
            <el-table-column prop="DomainName" label="域名" min-width="150" />
            <el-table-column prop="CodeTld" label="域名后缀" min-width="120" />
            <el-table-column prop="IsPremium" label="是否溢价" min-width="120">
                <template #default="scope">
                    {{ scope.row.isPremium ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column prop="EffectiveDNS" label="DNS服务器" min-width="350">
                <template #default="scope">
                    {{ scope.row.EffectiveDNS.join(",") }}
                </template>
            </el-table-column>
            <el-table-column prop="GradeTitle" label="DNS解析" min-width="150" />
            <el-table-column prop="RecordCount" label="解析记录数" class-name="underline-center" min-width="150">
                <template #default="scope">
                    <span style="color: #2900ff;">
                        {{ scope.row.RecordCount }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="Status" label="解析服务状态" min-width="150">
                <template #default="scope">
                    {{ scope.row.Status === "ENABLE" ? "正常" : "异常" }}
                </template>
            </el-table-column>
            <el-table-column prop="TTL" label="TTL" min-width="100" />

            <el-table-column prop="AutoRenew" label="自动续费" min-width="120">
                <template #default="scope">
                    {{ scope.row.AutoRenew ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column prop="CreationDate" label="创建时间" min-width="150" />
            <el-table-column prop="ExpirationDate" label="到期时间" min-width="150" />
        </el-table>
    </div>
</template>

<script setup>
import { useRequest } from "@usehook"
import { onMounted } from "vue"
import { getIcon } from "@/utils/tools"
import storeInstance from "@/pinia"
import router from "@/router"

const { tagMenuStore } = storeInstance

let domainList = $ref([])
let loading = $ref(false)

const getData = () => {
    loading = true
    const domains = []
    useRequest("/tencentCloud/describeDomain").then(resp => {
        if (resp && resp.status) {
            for (const domain of resp.data) {
                for (const domainSet of domain.DomainList) {
                    domains.push({
                        ...domainSet, instance: domain.instance
                    })
                }
            }
            domainList = domains
        }
    }).finally(_ => {
        loading = false
    })
}

const cellClick = (row, column) => {
    if (column.property === "RecordCount") {
        let index = "/tencentCloud/domainRecord"
        tagMenuStore.setTitle(row.DomainName)
        const query = { instance: row.instance, domain: row.DomainName }
        router.push({ path: index, query })
    }
}

onMounted(() => {
    getData()
})
</script>

<style>
.domain .domain-item+.domain-item {
    padding-top: 10px;
}

.domain .domain-label {
    text-align: right;
    max-width: 120px;
    padding-right: 10px;
}

.domain .domain-info {
    max-width: calc(100% - 120px);
    min-width: calc(100% - 120px);
}

.domain .el-card__body {
    padding: 10px 10px 10px 0;
}

.domain .el-card__header {
    padding: 13px 15px;
}

.domain .domain-title {
    font-size: calc(var(--font-size) + 5px);
    padding-bottom: 10px;
}
</style>